<template>
  <div class="app-content">
    <dk-table
      ref="DkTableRef"
      table-api="/adminapi/platform.app.addon"
      :query="{ plaid: getPlaid() }"
      :hide-buttons="['recycle', 'add', 'delete', 'edit']"
      :cache-table="!getDev()"
    >
      <template #DeleteButtonAppend>
        <el-button type="warning" class="ml" icon="Plus" @click="dialogVisible = true">添加小程序模块</el-button>
      </template>
      <template #app_solt="{ row }">
        <div v-if="row.name && row.logo" class="text-center">
          <el-image :src="row.logo || '@/assets/default/addon.png'" alt="" style="width: 80px; height: 80px; border-radius: 10px">
            <template #error>
              <img src="@/assets/default/addon.png" alt="" style="width: 80px" />
            </template>
          </el-image>
          <div class="color-#666">{{ row.name }}</div>
        </div>
        <div v-else class="text-center">
          <div v-if="row.addons" class="text-center">
            <el-image :src="row.addons.icon || '@/assets/default/addon.png'" alt="" style="width: 80px; height: 80px; border-radius: 10px">
              <template #error>
                <img src="@/assets/default/addon.png" alt="" style="width: 80px" />
              </template>
            </el-image>
            <div class="color-#666">{{ row.addons.title }}</div>
          </div>
        </div>
      </template>
      <template #addon_solt="{ row }">
        <div v-if="row.addons" class="text-center">
          <el-image :src="row.addons.icon || '@/assets/default/addon.png'" alt="" style="width: 80px; height: 80px; border-radius: 10px">
            <template #error>
              <img src="@/assets/default/addon.png" alt="" style="width: 80px" />
            </template>
          </el-image>
          <div class="color-#666">{{ row.addons.title }}</div>
        </div>
      </template>
    </dk-table>
    <dk-form ref="settingRef" :key="chooseItem.id" :form-data="formData" top="5vh" :is-dialog="true" @submit="onsubmit()" />
    <el-dialog v-model="dialogVisible" title="添加小程序模块" width="810px">
      <AddPlatformAddonAppList @success="onsubmit()" />
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'

// 自动判断开发模式启用缓存
// @ts-ignore
import { getDev } from '@/utils/auth'
// @ts-ignore
import { getPlaid } from '@/composables/useSystem'
import { getPlatformAddonAppForm } from '@/api/platform/platform_app.js'
import AddPlatformAddonAppList from '@/views/platform/components/common/AddPlatformAddonAppList/index.vue'
const DkTableRef = ref()
const DkFormRef = ref()
const settingRef = ref()
const formData = ref(null)
const dialogVisible = ref(false)
const chooseItem = ref({})
const handleAdd = () => {
  DkFormRef.value.show()
}
const submit = (data) => {
  console.log(data)
  DkTableRef.value.DkTable.getIndex()
}

const headerCellStyle = (data) => {
  if (data.columnIndex === 2) {
    return {
      textAlign: 'center'
    }
  } else {
    return {}
  }
}

const onsubmit = () => {
  dialogVisible.value = false
  DkTableRef.value.DkTable.getIndex()
}

onMounted(() => {
  DkTableRef.value.DkTable.table.filter.limit = 5
  DkTableRef.value.DkTable.onClickButton((event, data) => {
    // 判断按钮事件名称
    if (event === 'setting') {
      chooseItem.value = data.row
      getPlatformAddonAppForm(data.row.id, data.row.plaid).then((res) => {
        formData.value = res.data
        settingRef.value.show()
      })
    } else if (event === 'jump') {
      window.open(data.row.addon.default_url)
    }
  })
})
</script>
<style lang="scss" scoped></style>
